<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh">
<!--style="background: url('../images/农业.jpg') no-repeat;background-size: 100%"-->

<head>
    <meta charset="UTF-8">
    <title>滑动开关按钮</title>
    <style>
        .top {
            text-align: center;
            width: 100%;
            height: 80px;
            line-height: 80px;
        }

        body {
            padding: 0;
            margin: 0;
        }

        img {
            opacity: 0.6;
            filter: alpha(opacity=40)
        }

        .theme {
            height: 50px;
            margin-left: 26%;
            font-size: 30px
        }

        input {
            display: inline-block;
            border-radius: 100%;
            margin-right: 10px;
            vertical-align: middle;
        }

        input[type="button"][kid="kai"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 90px;
            height: 60px;
            /*border-radius: 50%;*/
            margin-right: 50px;
            background-color: #01cd78;
            border: 1px solid #01cd78;
            background-clip: content-box;
            padding: 5px;

        }

        input[type="button"][kid="kaio"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 90px;
            height: 60px;
            /*border-radius: 50%;*/
            margin-right: 50px;
            background-color: #01cd78;
            border: 1px solid #01cd78;
            background-clip: content-box;
            padding: 5px;

        }

        input[type="button"][kid="guan"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 90px;
            height: 60px;
            /*border-radius: 50%;*/
            margin-right: 50px;
            background-color: red;
            border: 1px solid red;
            background-clip: content-box;
            padding: 5px;

        }

        input[type="button"][kid="guano"]+label::before {
            content: "\a0";
            /*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 90px;
            height: 60px;
            /*border-radius: 50%;*/
            margin-right: 50px;
            background-color: red;
            border: 1px solid red;
            background-clip: content-box;
            padding: 5px;

        }


        input[type="button"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
        /* .all{
            display: flex;
            justify-content:space-between;
            width: 80%;
            margin: 20px auto;
        }
        .title{
            display: flex;
            flex-direction:column;
            align-items: center;
            text-align: center
        }
        .item{
            width: 60%;
            font-size: 26px;
        }
        .photo{
            margin-top: 25px;
            width: 80%;
            height: 300px;
        }
        .photo img{
            width: 80%;
            height: 500px;
        }
        
        .jump {
            animation: myfirst 0.4s;
            animation-iteration-count:1;
        }

        @keyframes myfirst {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(0px, -9px);
            }
            100% {
                transform: translate(0px, 0px);
            }
        } */

            </style>
    <script src="/static/home/js/jquery-3.4.1.min.js"></script>
</head>

<body style="min-height: 300px;height:auto">
	
    <div class="top">
        <h1>设备控制</h1>
    </div>
    <!--<p>-->
    <!--<span class="theme">{$vo2['control_shortname']}</span>-->
    <!--{if condition="$vo2['is_open'] eq 1"}-->
    <!--<input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"  checked   value="1" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}">开-->
    <!--<input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"      value="0" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">关-->
    <!--{else /}-->
    <!--<input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"    value="1" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">开-->
    <!--<input type="radio" style="transform: scale(1.5,1.5)" name="witch{$key+1}"   class="item{$key+1}"  checked   value="0" data-id="{$vo2['id']}"  data-dev_id="{$vo2['control_id']}">关-->
    <!--{/if}-->
    <!--</p>-->


     <!-- <div class="all">
         <div class="title">
             <div class="item">519</div>
             <div class="photo" onclick="jmp"><img id="img" src="/static/admin/images/tp.jpg"></div>
         </div>
         <div class="title">
            <div class="item">温室</div>
            <div class="photo"><img id="imgs" src="/static/admin/images/tp.jpg"></div>
         </div>
     </div> -->

    {foreach name="result" item="vo2" }
    <p style="display: flex">
        <span class="theme" style="flex: 1">{$vo2['control_shortname']}</span>
        <span style="flex: 1" style="vertical-align: middle;">
            {if condition="$vo2['is_open'] eq 1"}
            <input type="button" id="kai{$vo2['id']}" style="transform: scale(1.5,1.5)" name="witch{$key+1}" kid="kai"
                class="item{$key+1}" value="1" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}"  data-gateway_id="{$vo2['gateway_id']}" data-wangguan_id="{$vo2['wangguan_id']}">
            <label for="kai{$vo2['id']}"></label>
            <input type="button" id="guan{$vo2['id']}" style="transform: scale(1.5,1.5)" name="witch{$key+1}" kid="guan"
                class="item{$key+1}" value="0" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}"  data-gateway_id="{$vo2['gateway_id']}" data-wangguan_id="{$vo2['wangguan_id']}">
            <label for="guan{$vo2['id']}"></label>
            {else /}
            <input type="button" id="kaio{$vo2['id']}" style="transform: scale(1.5,1.5)" name="witch{$key+1}" kid="kaio"
                class="item{$key+1}" value="1" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}"  data-gateway_id="{$vo2['gateway_id']}" data-wangguan_id="{$vo2['wangguan_id']}">
            <label for="kaio{$vo2['id']}"></label>
            <input type="button" id="guano{$vo2['id']}" style="transform: scale(1.5,1.5)" name="witch{$key+1}"
                kid="guano" class="item{$key+1}" value="0" data-id="{$vo2['id']}" data-dev_id="{$vo2['control_id']}"  data-gateway_id="{$vo2['gateway_id']}" data-wangguan_id="{$vo2['wangguan_id']}">
            <label for="guano{$vo2['id']}"></label>
            {/if}
        </span>
		<img src="{$vo2['open_imgUrl']}"  data-open_imgUrl="{$vo2['open_imgUrl']}"  data-control_id="{$vo2['control_id']}" id="{$vo2['gateway_id']}{$vo2['control_id']}"  data-close_imgUrl="{$vo2['close_imgUrl']}"  data-gateway_id="{$vo2['gateway_id']}" style="width:60px;height:60px; display:inline-block;"alt="">
    </p>
    {/foreach}

</body>

</html>
<script>   
    ws = new WebSocket("ws://127.0.0.1:5103");
    var heartCheck = {
        timeout: 8000,//60ms
        timeoutObj: null,
        reset: function () {
            clearInterval(this.timeoutObj);
            this.start();
        },
        start: function () {
            this.timeoutObj = setInterval(function () {
                var message = { "type": "ping" };
                // var message = {"uid":"1","gateway_id":"wenshi_15","data":{"dev_id":'qiya',"value":1}};
                ws.send(JSON.stringify(message));
            }, this.timeout)
        }
    }
    ws.onopen = function () {
        heartCheck.start();
    };
    ws.onmessage = function (event) {
        heartCheck.reset();
    };
    for (var i = 1; i <= {$count}; i++) {
        var c = "item" + i;
        $("input[type=button][class=" + c + "]").click(function () {
            var current_value = this.value;
            console.log(current_value);
            //得到class名字
            var cla = this.className;
            // 得到控制设备macid
            var control_id = this.dataset.dev_id;
			// 得到网关id  --  网关编码 （列如：wenshi_15）
			var gateway_id = this.dataset.gateway_id;
			// 得到网关id  --  id  主键
			var wangguan_id = this.dataset.wangguan_id;
            var message = { "uid": "1", "gateway_id": gateway_id, "data": { "dev_id": control_id, "data": current_value } };
             ws.send(JSON.stringify(message));

            // 联动控制
            $.post("{:url('index/getControlRelation')}", { control_id: control_id, wangguan_id:wangguan_id }, function (res) {
                if (res.code != 0) {
                    for (let i = 0; i < res.data.length; i++) {
                        const e = res.data[i];
                        var msg = { "uid": "1", "gateway_id": gateway_id, "data": { "dev_id": e, "data": current_value } };
                         ws.send(JSON.stringify(msg));
                    }
                }
            })
        });
    }

</script>

<script>

    $('#img').mouseenter(function(){
        $("#img").addClass("jump");
    })
    $('#img').mouseleave(function(){
        $("#img").removeClass("jump");
    })
    $('#img').click(function(){
        window.location.href="{:url('house')}";
    })


    $('#imgs').mouseenter(function(){
        $("#imgs").addClass("jump");
    })
    $('#imgs').mouseleave(function(){
        $("#imgs").removeClass("jump");
    })
    $('#imgs').click(function(){
        window.location.href="{:url('greenhouse')}";
    })

    setInterval(function () {
        $.post("{:url('get_status')}", {}, function (res) {
	
			for(var i in res.key){
				if(res.value[i] == 0 ){
					$("#wenshi_15"+res.key[i]).attr("src",$("#wenshi_15"+res.key[i]).attr("data-close_imgUrl"));
				}else{
					$("#wenshi_15"+res.key[i]).attr("src",$("#wenshi_15"+res.key[i]).attr("data-open_imgUrl"))
				}
			}
        });
    }, 1000);
	
</script>
